<template>
    <div v-loading="infoLoading"  class="big-box"  v-if="show">
            <div class="title">基础信息</div> 
            <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="100px">
              <div class="flex justify-between">
                <div>
                    <el-form-item label="上传图片" ref="uploadElement" >
                        <UploadImg is-show-tip :limit="1" @success="handleUploadFileSuccess">
                        <div class="upload-info">
                          <img v-if="imageUrl" :src="imageUrl | imageFormat" class="avatar"/>
                          <i
                            v-else
                            class="el-icon-plus avatar-uploader-icon"
                            style="width: 160px; height: 160px;"
                          />
                        </div>
                      </UploadImg>
                    </el-form-item>
                    <el-form-item label="招商行业"  prop="industryId">
                        <el-select v-model="ruleForm.industryId" placeholder="请选择">
                          <el-option
                              v-for="item in options"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                              >
                          </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="联系人"  prop="contact">
                        <el-input v-model="ruleForm.contact"></el-input>
                    </el-form-item>
                    <el-form-item label="招商热线"  prop="tel">
                        <el-input v-model="ruleForm.tel"></el-input>
                    </el-form-item>
                 </div>
                <div style="flex:1">
                    <el-form-item label="园区简介"  prop="briefIntroduction">
                        <el-input type="textarea" rows="5"  v-model="ruleForm.briefIntroduction"></el-input>
                    </el-form-item>
                    <el-form-item label="招商标准"  prop="standard">
                        <el-input type="textarea"  rows="5" v-model="ruleForm.standard"></el-input>
                    </el-form-item>
                    <el-form-item label="园区优势"  prop="advantage">
                        <el-input type="textarea"  rows="5" v-model="ruleForm.advantage"></el-input>
                    </el-form-item>
                </div>
              </div>
              <el-form-item>
               <div style="margin-left:200px;">
                    <el-button type="primary" @click="onSubmit('ruleForm')">保存</el-button>
                    <el-button  @click.stop="closeDiv">取消</el-button>
               </div>
                </el-form-item>
            </el-form>
    </div>
</template>
<script>
import UploadImg from '@/components/upload-img/index'
import { getRecruitInfo,RecruitModify,getUpDataList } from '../api'
  export default {
    props:['show'],
    components: { UploadImg },
    data() {
      return {
        infoLoading:true,
        imageUrl:'',
        ruleForm:{},
        options:[],
        dialogId:0,
         rules: {
            industryName: [
                { required: true, message: '请填写招商行业', trigger: 'blur' },
            ],
            contact: [
                { required: true, message: '请填写联系人', trigger: 'blur' }
            ],
            tel: [
                { required: true, message: '请填写联系电话', trigger: 'blur' }
            ],
            parkUrl: [
                    {required: true, message: '请上传图片', trigger: 'blur'},
                ],
            briefIntroduction:[
                    {required: true, message: '请填写园区简介', trigger: 'blur'},
            ],
            standard:[
                    {required: true, message: '请填写园区招商标准', trigger: 'blur'},
            ],
            advantage:[
                    {required: true, message: '请填写园区优势', trigger: 'blur'},
            ],
          }
      };
    },
    mounted(){
      this.getParkInfo()
      this.getUpData()
    },
    methods: {
        // 获取行业下拉列表
      getUpData() {
        getUpDataList({id:this.dialogId}).then((res) => {
          this.options = res
        })
      },
      // 获取基础信息
      async getParkInfo() {
          const paging = {pageNo: 1,pageSize: 10}
          const allData = await getRecruitInfo(paging)
          this.ruleForm = allData
          this.imageUrl = this.ruleForm.imgId
          this.infoLoading = false
      },
      // 保存表单
      onSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            RecruitModify(this.ruleForm).then(res => {
              if(res === true) {
                  this.$parent.getParkInfo()
                  this.$emit('update:basicsShow', false)
                  this.closeDiv()
                  this.$message({
                    message: '保存成功！',
                    type: 'success'
                })
              }
            })
          } else {
            return false
          }
        });
      },
      closeDiv() {
        this.$emit('update:show', false); //触发 input 事件，并传入新值
      },
      handleUploadFileSuccess(fileList) {
        this.ruleForm.imgId = fileList[fileList.length - 1].fileId
        this.imageUrl = this.ruleForm.imgId
      }
    }
  }
</script>
<style lang="scss" scoped>
.big-box{width:800px;background:#fff;padding:20px;border-radius:5px;border:1px solid #ccc;  }
.title{text-align:center;margin-bottom:20px;font-size: 20px;font-weight: 600;}
  .avatar-uploader .el-upload {
    border: 1px dashed #ccc;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: vw(150px);
    height: vw(150px);
    line-height: vw(150px);
    text-align: center;
  }
  .avatar {
    width: vw(150px);
    height: vw(150px);
    display: block;
  }
::v-deep .avatar-uploader{
    border: 1px solid #ccc;
    width: vw(150px);
    height:vw(150px)
}
::v-deep .el-form-item__content{
    padding-left:-100px
}
</style>

